<template>
	<div class="main-content">
		<ToolBar>
			<el-button style="float:left;" type="primary" icon="el-icon-plus" size="small" @click="editDictionary(false)">添加</el-button>
			<div style="float: right">
				<el-input placeholder="请输入字典类别！" size="small" style="width: 200px" v-model="params.categoryName" @clear="searchDictionary"
				 clearable>
				</el-input>
				<el-button @click="searchDictionary" type="success" icon="el-icon-search" size="small"></el-button>
			</div>
		</ToolBar>
		<el-table :data="dictionaryData" border highlight-current-row ref="table" height="calc(100% - 90px)">
			<el-table-column fixed="left"  type="index" label="序号" width="50" align="center">
			</el-table-column>
			<el-table-column fixed="left" prop="categoryCode" label="类别编码" align="center">
			</el-table-column>
			<el-table-column prop="categoryName" label="类别名称" align="center">
			</el-table-column>
			<el-table-column prop="itemName" label="字典名称" align="center">
			</el-table-column>
			<el-table-column prop="itemValue" label="字典值" align="center">
			</el-table-column>
			<el-table-column prop="itemSequence" label="字典顺序" align="center">
			</el-table-column>
			<el-table-column prop="remarks" label="描述" width="140" :show-overflow-tooltip="true" align="center">
				
			</el-table-column>
			<el-table-column prop="enable" width="100" label="是否启用" align="center">
				<template slot-scope="scope">
					<el-switch size="small" @change="dictionaryEnableSwitch(scope.row)" v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff0000">
					</el-switch>
				</template>
			</el-table-column>
			
			<!-- <el-table-column prop="enable" width="100" label="是否启用">
				<div slot-scope="scope" style="width: 100%;text-align: center" >
					<el-tag v-if="scope.row.enable" >启用</el-tag>
					<el-tag v-else type="danger">禁用</el-tag>
				</div>
			</el-table-column> -->
			
			<el-table-column fixed="right"  label="操作" width="120" align="center">
				<template slot="header" slot-scope="scope">
					<HelpHint content="编辑字典项/ 查看详情 / 删除字典项" >操作</HelpHint>
				</template>
				<template slot-scope="scope">
					<el-tooltip class="item" v-if="scope.row.delete == false && scope.row.editable == true" effect="dark" content="编辑字典项" placement="top-end">
						<el-button @click="editDictionary(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-else  effect="dark" content="字典项详情" placement="top-end">
						<el-button @click="showDictionary(scope.row)" type="info" icon="el-icon-info" size="small" circle></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="删除字典项" placement="top-end">
						<el-button :disabled="scope.row.editable == false" @click="deleteDictionary(scope.row.id)" type="danger" icon="el-icon-delete" circle size="small"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pageNum"
		 :page-sizes="[5, 10, 20, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog v-dialogDrag :title="titile" :close-on-click-modal="false" :close-on-press-escape="false" width="550px"
		 height="400px" :visible.sync="dialogFormVisible" >
			<el-form :model="currentDictionary">
				<el-form-item size="small" label="类别编码:" :label-width="formLabelWidth">
					<el-col :span="22">
						<el-input :readonly="dialogFormReadOnly" v-model="currentDictionary.categoryCode" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item size="small" label="类别名称:" :label-width="formLabelWidth">
					<el-col :span="22">
						<el-input :readonly="dialogFormReadOnly" v-model="currentDictionary.categoryName" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item size="small" label="字典名称:" :label-width="formLabelWidth">
					<el-col :span="22">
						<el-input :readonly="dialogFormReadOnly" v-model="currentDictionary.itemName" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item size="small" label="字典值:" :label-width="formLabelWidth">
					<el-col :span="22">
						<el-input :readonly="dialogFormReadOnly" v-model="currentDictionary.itemValue" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item size="small" label="字典顺序:" :label-width="formLabelWidth">
					<el-col :span="22">
						<el-input :readonly="dialogFormReadOnly" v-model="currentDictionary.itemSequence" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item size="small" label="是否启用:" :label-width="formLabelWidth">
					<el-col :span="22">
						<el-switch :disabled="dialogFormReadOnly" style="float: left;height: 32px;" v-model="currentDictionary.enable" active-color="#13ce66"
						 inactive-color="#ff0000">
						</el-switch>
					</el-col>
				</el-form-item>
				<el-form-item size="small" label="描述:" :label-width="formLabelWidth">
					<el-col :span="22">
						<el-input type="textarea" :rows="2" :readonly="dialogFormReadOnly" v-model="currentDictionary.remarks" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" :disabled="dialogFormReadOnly" @click="saveDictionary">保 存</el-button>
			</div>
		</el-dialog>

	</div>
</template>


<script>
	import ToolBar from '@/components/ToolBar.vue';
	import HelpHint from '@/components/HelpHint.vue';
	import {
		setPageSize,
		getPageSize
	} from '../../utils/dataStorage'
	import {
		dictionaryList,
		dictionarySave,
		dictionaryDelete
	} from '../../api/dictionary';


	export default {
		data() {
			return {
				titile: "字典信息",
				params: {
					categoryName: '',
				},
				pageSize: getPageSize(),
				pageNum: 1,
				total: 0,
				dictionaryData: [],
				currentDictionary: {},
				dialogFormVisible: false,
				dialogFormReadOnly:false,
				formLabelWidth: '120px'
			}
		},
		created: function() {

		},
		mounted: function() {
			this.loadDictionaryList();
		},
		methods: {
			loadDictionaryList: function() {
				dictionaryList({
					categoryName: this.params.categoryName,
					pageNum: this.pageNum - 1,
					pageSize: this.pageSize
				}).then(data => {
					this.dictionaryData = data.content;
					this.total = data.totalElements;
				}).catch(exception => {

				});
			},
			handleSizeChange: function(size) {
				setPageSize(size);
				this.pageSize = size;
				this.loadDictionaryList();
			},
			handleCurrentChange: function(currentPage) {
				this.pageNum = currentPage;
				this.loadDictionaryList();
			},
			searchDictionary() {
				this.loadDictionaryList();
			},
			dictionaryEnableSwitch(data) {
				if (data != false) {
					this.currentDictionary = JSON.parse(JSON.stringify(data));
					this.saveDictionary();
				}
			},
			editDictionary(data) {
				this.dialogFormReadOnly = false;
				if (data != false) {
					this.currentDictionary = JSON.parse(JSON.stringify(data));
				} else {
					this.currentDictionary = {};
				}
				this.dialogFormVisible = true;
			},
			showDictionary(data) {
				this.dialogFormReadOnly = true;
				if (data != false) {
					this.currentDictionary = JSON.parse(JSON.stringify(data));
				} else {
					this.currentDictionary = {};
				}
				this.dialogFormVisible = true;
			},
			saveDictionary() {				
				dictionarySave(this.currentDictionary).then(data => {
					var isEdit = false;
					this.dictionaryData.forEach((dictionary, index) => {
						if (dictionary.id == data.id) {
							this.dictionaryData.splice(index,1,data);
							isEdit = true;
						}
					});
					this.$message({
						message: '保存成功!',
						type: 'success'
					});
					if (isEdit == false) {						
						this.loadDictionaryList();
					}					
					this.dialogFormVisible = false;
				}).catch(exception => {

				});
			},
			deleteDictionary(id) {
				dictionaryDelete(id).then(data => {
					this.$message({
						message: '删除成功!',
						type: 'success'
					});
					this.loadDictionaryList();
				}).catch(exception => {

				});
			}
		},
		components: {
			ToolBar,
			HelpHint
		}
	}
</script>
<style lang="scss">

</style>
